<template>
  <div>
    <h2>登录</h2>
    <table class="table table-bordered">
      <tr>
        <td>用户名：</td>
        <td><input type="text" v-model="state.U_Account" class="form-control" ></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" v-model="state.U_Pwd" class="form-control"></td>
      </tr>
      <tr>
        <td colspan="2"><button @click="login" class="btn btn-primary">登录</button></td>
      </tr>

    </table>
  </div>
</template>
<script setup lang="ts">
import {reactive,toRefs} from 'vue'
import axios from 'axios'
//广泛的
const data=reactive({
  state:{
    U_Account:'',
    U_Pwd:''
  }
})

const {state}=toRefs(data)

const login=()=>{
  if(state.value.U_Account==''){
    alert("用户名不能为空")
    return
  }
  if(state.value.U_Pwd==''){
    alert("密码不能为空")
    return
  }
 const pwd=/^[a-zA-Z0-9]$/
  if(!pwd.test(state.value.U_Pwd)){
    alert("密码格式不正确")
    return
  }


  axios({
    url:'http://localhost:59121/api/User/GetLogin',
    method:'get',
    params:state.value
  })
  .then((res)=>{
    console.log(res.data)
    if(res.data==1){
      alert('账号不存在')
      return
    }
    if(res.data==2){
      alert('密码错误')
      return
    }
    if(res.data==3){
      alert('登陆成功')
      return
    }else{
      alert('登陆失败')
    }
  })
  .catch((err)=>{
    console.log(err)
  })
}

</script>